<template>
  <div>
    <V-CommonHeaderLeft>
      <div id="app">
        <el-row>
          <!-- 头部 -->
          <div class="header">
            <el-col :span="2" class="header-nav">
              <router-link to="/">首页&nbsp;&nbsp;&nbsp;/</router-link>
              <router-link to="/">应用</router-link>
            </el-col>
            <el-col :span="1" :offset="20" class="header-img">
              <!-- <img src="" alt=""> -->
            </el-col>
          </div>
        </el-row>
        <div class="contents">
          <el-tabs v-model="activeName" class="elTabs">
            <el-tab-pane label="我的应用" name="first">
              <div class="myApp">
                <div class="myApp-flex">
                  <div class="myApp-city">
                    <img src="./../../../static/images/application_icon_fitment.png">
                    <div class="myApp-city-right">
                      <h3>商城装修</h3>
                      <p>提供丰富的组件支持，可自定义移动端订货商城首页的内容</p>
                      <router-link to="/">设置</router-link>
                      <el-switch v-model="value1" disabled></el-switch>
                    </div>
                  </div>
                  <div class="myApp-city">
                    <img src="./../../../static/images/application-icon-3.png">
                    <div class="myApp-city-right">
                      <h3>开放注册</h3>
                      <p>启用后，客户可自主注册账号，浏览商品，进行订货</p>
                      <router-link to="/applicationRegister">设置</router-link>
                      <el-button plain @click="open1" style="border:0;" duration='3'>
                        <el-switch v-model="value" active-color="#13ce66" inactive-color="#BFBFBF"></el-switch>
                      </el-button>
                    </div>
                  </div>
                  <div class="myApp-city">
                    <img src="./../../../static/images/application-icon-8.png">
                    <div class="myApp-city-right">
                      <h3>参考进价</h3>
                      <p>录入商品的参考进货价，企业可更好地设置销售价</p>
                      <router-link to="/applicationPrice">设置</router-link>
                       <el-button plain @click="open1" style="border:0;" duration='3'>
                      <el-switch
                        v-model="valuePrice"
                        active-color="#13ce66"
                        inactive-color="#BFBFBF"
                      ></el-switch>
                       </el-button>
                    </div>
                  </div>
                </div>
                <div class="myApp-flex">
                  <div class="myApp-city">
                    <img src="./../../../static/images/application_icon_10.png">
                    <div class="myApp-city-right">
                      <h3>报表设置</h3>
                      <p>可根据业务需求设置报表模块的统计方式</p>
                      <router-link to="/applicationReport">设置</router-link>
                      <el-button plain @click="open1" style="border:0;" duration='3'>
                        <el-switch v-model="valueB" active-color="#13ce66" inactive-color="#BFBFBF"></el-switch>
                      </el-button>
                    </div>
                  </div>
                  <div class="myApp-city">
                    <img src="./../../../static/images/application_icon_17.png">
                    <div class="myApp-city-right">
                      <h3>商品库</h3>
                      <p>启用后可从商品库导入商品也可将您的商品库共享给您的下游客户</p>
                      <router-link to="/applicationGoods">设置</router-link>
                      <el-button plain @click="open1" style="border:0;" duration='3'>
                        <el-switch
                          v-model="valueGoods"
                          active-color="#13ce66"
                          inactive-color="#BFBFBF"
                        ></el-switch>
                      </el-button>
                    </div>
                  </div>
                  <div class="myApp-city">
                    <img src="./../../../static/images/application_icon_22.png">
                    <div class="myApp-city-right">
                      <h3>自定义登陆项</h3>
                      <p>支持自定义PC端登录页，可应用焦点图模式或全屏图模式</p>
                      <router-link to="/applicationLogin">设置</router-link>
                      <el-button plain @click="open1" style="border:0;" duration='3'>
                        <el-switch
                          v-model="valueLogin"
                          active-color="#13ce66"
                          inactive-color="#BFBFBF"
                        ></el-switch>
                      </el-button>
                    </div>
                  </div>
                </div>
                <div class="myApp-flex-last">
                  <div class="myApp-city">
                    <img src="./../../../static/images/dxtx.png">
                    <div class="myApp-city-right">
                      <h3>短信提醒</h3>
                      <p>合理设置短信提醒，提升客户满意度</p>
                      <router-link to="/marketingInfo">设置</router-link>
                      <el-button plain @click="open1" style="border:0;" duration='3'>
                        <el-switch
                          v-model="valueInfo"
                          active-color="#13ce66"
                          inactive-color="#BFBFBF"
                        ></el-switch>
                      </el-button>
                    </div>
                  </div>
                  <div class="myApp-city" style="margin-left:20px;">
                    <img src="./../../../static/images/application_icon_20.png">
                    <div class="myApp-city-right">
                      <h3>商品预售</h3>
                      <p>针对无库存的商品可进行先预售再组织生产</p>
                      <router-link to="/marketingsSale">设置</router-link>
                      <el-button plain @click="open1" style="border:0;" duration='3'>
                        <el-switch
                          v-model="valueSale"
                          active-color="#13ce66"
                          inactive-color="#BFBFBF"
                        ></el-switch>
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="全部应用" name="second">
              <div class="myApp">
                <div class="myApp-flex">
                  <div class="myApp-city">
                    <img src="./../../../static/images/application_icon_fitment.png">
                    <div class="myApp-city-right">
                      <h3>商城装修</h3>
                      <p>提供丰富的组件支持，可自定义移动端订货商城首页的内容</p>
                      <router-link to="/">设置</router-link>
                      <el-button plain @click="open1" style="border:0;" duration='3'>
                        <el-switch v-model="value1" disabled></el-switch>
                      </el-button>
                    </div>
                  </div>
                  <div class="myApp-city">
                    <img src="./../../../static/images/application-icon-3.png">
                    <div class="myApp-city-right">
                      <h3>开放订货平台</h3>
                      <p>启用后，客户可自主注册账号，浏览商品，进行订货</p>
                      <router-link to="/">设置</router-link>
                      <el-button plain @click="open1" style="border:0;" duration='3'>
                        <el-switch v-model="value" active-color="#13ce66" inactive-color="#BFBFBF"></el-switch>
                      </el-button>
                    </div>
                  </div>
                  <div class="myApp-city">
                    <img src="./../../../static/images/application-icon-8.png">
                    <div class="myApp-city-right">
                      <h3>参考定价</h3>
                      <p>录入商品的参考进货价，企业可更好地设置销售价</p>
                      <router-link to="/">设置</router-link>
                      <el-button plain @click="open1" style="border:0;" duration='3'>
                        <el-switch
                          v-model="valuePrice"
                          active-color="#13ce66"
                          inactive-color="#BFBFBF"
                        ></el-switch>
                      </el-button>
                    </div>
                  </div>
                </div>
                <div class="myApp-flex">
                  <div class="myApp-city">
                    <img src="./../../../static/images/application_icon_10.png">
                    <div class="myApp-city-right">
                      <h3>报表设置</h3>
                      <p>可根据业务需求设置报表模块的统计方式</p>
                      <router-link to="/">设置</router-link>
                      <el-button plain @click="open1" style="border:0;" duration='3'>
                        <el-switch v-model="valueB" active-color="#13ce66" inactive-color="#BFBFBF"></el-switch>
                      </el-button>
                    </div>
                  </div>
                  <div class="myApp-city">
                    <img src="./../../../static/images/application_icon_17.png">
                    <div class="myApp-city-right">
                      <h3>商品库</h3>
                      <p>启用后可从商品库导入商品也可将您的商品库共享给您的下游客户</p>
                      <router-link to="/">设置</router-link>
                      <el-button plain @click="open1" style="border:0;" duration='3'>
                        <el-switch
                          v-model="valueGoods"
                          active-color="#13ce66"
                          inactive-color="#BFBFBF"
                        ></el-switch>
                      </el-button>
                    </div>
                  </div>
                  <div class="myApp-city">
                    <img src="./../../../static/images/application_icon_22.png">
                    <div class="myApp-city-right">
                      <h3>自定义登陆项</h3>
                      <p>支持自定义PC端登录页，可应用焦点图模式或全屏图模式</p>
                      <router-link to="/">设置</router-link>
                      <el-button plain @click="open1" style="border:0;" duration='3'>
                        <el-switch
                          v-model="valueLogin"
                          active-color="#13ce66"
                          inactive-color="#BFBFBF"
                        ></el-switch>
                      </el-button>
                    </div>
                  </div>
                </div>
                <div class="myApp-flex">
                  <div class="myApp-city">
                    <img src="./../../../static/images/application_icon_10.png">
                    <div class="myApp-city-right">
                      <h3>报表设置</h3>
                      <p>可根据业务需求设置报表模块的统计方式</p>
                      <router-link to="/">设置</router-link>
                      <el-button plain @click="open1" style="border:0;" duration='3'>
                        <el-switch v-model="valueB" active-color="#13ce66" inactive-color="#BFBFBF"></el-switch>
                      </el-button>
                    </div>
                  </div>
                  <div class="myApp-city">
                    <img src="./../../../static/images/application_icon_17.png">
                    <div class="myApp-city-right">
                      <h3>商品库</h3>
                      <p>启用后可从商品库导入商品也可将您的商品库共享给您的下游客户</p>
                      <router-link to="/">设置</router-link>
                      <el-button plain @click="open1" style="border:0;" duration='3'>
                        <el-switch
                          v-model="valueGoods"
                          active-color="#13ce66"
                          inactive-color="#BFBFBF"
                        ></el-switch>
                      </el-button>
                    </div>
                  </div>
                  <div class="myApp-city">
                    <img src="./../../../static/images/application_icon_22.png">
                    <div class="myApp-city-right">
                      <h3>自定义登陆项</h3>
                      <p>支持自定义PC端登录页，可应用焦点图模式或全屏图模式</p>
                      <router-link to="/">设置</router-link>
                      <el-button plain @click="open1" style="border:0;" duration='3'>
                        <el-switch
                          v-model="valueLogin"
                          active-color="#13ce66"
                          inactive-color="#BFBFBF"
                        ></el-switch>
                      </el-button>
                    </div>
                  </div>
                </div>
                <div class="myApp-flex">
                  <div class="myApp-city">
                    <img src="./../../../static/images/application_icon_10.png">
                    <div class="myApp-city-right">
                      <h3>报表设置</h3>
                      <p>可根据业务需求设置报表模块的统计方式</p>
                      <router-link to="/">设置</router-link>
                      <el-button plain @click="open1" style="border:0;" duration='3'>
                        <el-switch v-model="valueB" active-color="#13ce66" inactive-color="#BFBFBF"></el-switch>
                      </el-button>
                    </div>
                  </div>
                  <div class="myApp-city">
                    <img src="./../../../static/images/application_icon_17.png">
                    <div class="myApp-city-right">
                      <h3>商品库</h3>
                      <p>启用后可从商品库导入商品也可将您的商品库共享给您的下游客户</p>
                      <router-link to="/">设置</router-link>
                      <el-button plain @click="open1" style="border:0;" duration='3'>
                        <el-switch
                          v-model="valueGoods"
                          active-color="#13ce66"
                          inactive-color="#BFBFBF"
                        ></el-switch>
                      </el-button>
                    </div>
                  </div>
                  <div class="myApp-city">
                    <img src="./../../../static/images/application_icon_22.png">
                    <div class="myApp-city-right">
                      <h3>自定义登陆项</h3>
                      <p>支持自定义PC端登录页，可应用焦点图模式或全屏图模式</p>
                      <router-link to="/">设置</router-link>
                      <el-button plain @click="open1" style="border:0;" duration='3'>
                        <el-switch
                          v-model="valueLogin"
                          active-color="#13ce66"
                          inactive-color="#BFBFBF"
                        ></el-switch>
                      </el-button>
                    </div>
                  </div>
                </div>
                <div class="myApp-flex">
                  <div class="myApp-city">
                    <img src="./../../../static/images/application_icon_10.png">
                    <div class="myApp-city-right">
                      <h3>报表设置</h3>
                      <p>可根据业务需求设置报表模块的统计方式</p>
                      <router-link to="/">设置</router-link>
                      <el-button plain @click="open1" style="border:0;" duration='3'>
                        <el-switch v-model="valueB" active-color="#13ce66" inactive-color="#BFBFBF"></el-switch>
                      </el-button>
                    </div>
                  </div>
                  <div class="myApp-city">
                    <img src="./../../../static/images/application_icon_17.png">
                    <div class="myApp-city-right">
                      <h3>商品库</h3>
                      <p>启用后可从商品库导入商品也可将您的商品库共享给您的下游客户</p>
                      <router-link to="/">设置</router-link>
                      <el-button plain @click="open1" style="border:0;" duration='3'>
                        <el-switch
                          v-model="valueGoods"
                          active-color="#13ce66"
                          inactive-color="#BFBFBF"
                        ></el-switch>
                      </el-button>
                    </div>
                  </div>
                  <div class="myApp-city">
                    <img src="./../../../static/images/application_icon_22.png">
                    <div class="myApp-city-right">
                      <h3>自定义登陆项</h3>
                      <p>支持自定义PC端登录页，可应用焦点图模式或全屏图模式</p>
                      <router-link to="/">设置</router-link>
                      <el-button plain @click="open1" style="border:0;" duration='3'>
                        <el-switch
                          v-model="valueLogin"
                          active-color="#13ce66"
                          inactive-color="#BFBFBF"
                        ></el-switch>
                      </el-button>
                    </div>
                  </div>
                </div>
                <div class="myApp-flex">
                  <div class="myApp-city">
                    <img src="./../../../static/images/application_icon_10.png">
                    <div class="myApp-city-right">
                      <h3>报表设置</h3>
                      <p>可根据业务需求设置报表模块的统计方式</p>
                      <router-link to="/">设置</router-link>
                      <el-button plain @click="open1" style="border:0;" duration='3'>
                        <el-switch v-model="valueB" active-color="#13ce66" inactive-color="#BFBFBF"></el-switch>
                      </el-button>
                    </div>
                  </div>
                  <div class="myApp-city">
                    <img src="./../../../static/images/application_icon_17.png">
                    <div class="myApp-city-right">
                      <h3>商品库</h3>
                      <p>启用后可从商品库导入商品也可将您的商品库共享给您的下游客户</p>
                      <router-link to="/">设置</router-link>
                      <el-button plain @click="open1" style="border:0;" duration='3'>
                        <el-switch
                          v-model="valueGoods"
                          active-color="#13ce66"
                          inactive-color="#BFBFBF"
                        ></el-switch>
                      </el-button>
                    </div>
                  </div>
                  <div class="myApp-city">
                    <img src="./../../../static/images/application_icon_22.png">
                    <div class="myApp-city-right">
                      <h3>自定义登录项</h3>
                      <p>支持自定义PC端登录页，可应用焦点图模式或全屏图模式</p>
                      <router-link to="/">设置</router-link>
                      <el-button plain @click="open1" style="border:0;" duration='3'>
                        <el-switch
                          v-model="valueLogin"
                          active-color="#13ce66"
                          inactive-color="#BFBFBF"
                        ></el-switch>
                      </el-button>
                    </div>
                  </div>
                </div>
                <div class="myApp-flex-last">
                  <div class="myApp-city">
                    <img src="./../../../static/images/dxtx.png">
                    <div class="myApp-city-right">
                      <h3>短信提醒</h3>
                      <p>合理设置短信提醒，提升客户满意度</p>
                      <router-link to="/">设置</router-link>
                      <el-button plain @click="open1" style="border:0;" duration='3'>
                        <el-switch
                          v-model="valueInfo"
                          active-color="#13ce66"
                          inactive-color="#BFBFBF"
                        ></el-switch>
                      </el-button>
                    </div>
                  </div>
                  <div class="myApp-city" style="margin-left:20px;">
                    <img src="./../../../static/images/application_icon_20.png">
                    <div class="myApp-city-right">
                      <h3>商品预售</h3>
                      <p>针对无库存的商品可进行先预售再组织生产</p>
                      <router-link to="/">设置</router-link>
                      <el-button plain @click="open1" style="border:0;" duration='3'>
                        <el-switch
                          v-model="valueSale"
                          active-color="#13ce66"
                          inactive-color="#BFBFBF"
                        ></el-switch>
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>

<script>
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
export default {
  components: {
    VCommonHeaderLeft
  },
  data () {
    return {
      activeName: 'first',
      // 商城装修：
      value1: true,
      // 开放订货平台
      value: true,
      // 参考定价
      valuePrice: true,
      // 报表设置
      valueB: true,
      // 商品库
      valueGoods: true,
      // login
      valueLogin: true,
      // 短信提醒
      valueInfo: true,
      // 预售
      valueSale: true
    }
  },
  methods: {
    open1 () {
      this.$notify({
        title: '成功',
        message: '设置成功',
        type: 'success'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#app {
  background-color: #f2f5f7;
  width: 100%;
  padding: 15px 10px 0px 10px;
  .header {
    height: 45px;
    .header-nav {
      line-height: 30px;
      font-size: 12px;
      display: flex;
      justify-content: space-around;
      padding-left: 10px;
      span {
        display: inline-block;
        margin-left: 10px;
      }
      a {
        color: #999999;
      }
      a:hover {
        color: #20ade5;
      }
    }
    .header-img {
      width: 25px;
      height: 25px;
      border-radius: 5px;
      border: 1px solid #dce4e7;
    }
  }
}
.header-nav > a:last-child {
  color: #333 !important;
}
.header-nav > a:last-child:hover {
  color: #333;
}
.contents {
  padding: 15px 0px 0px 0px;
  background-color: #fff;
  height: 510px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.elTabs /deep/ .el-tabs__item {
  width: 145px;
  text-align: center;
}
.myApp {
  padding: 20px 10px 0px 20px;
}
.myApp-flex {
  display: flex;
  justify-content: space-between;
}
.myApp-flex-last {
  display: flex;
}
.myApp-city {
  width: 340px;
  height: 140px;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  padding: 20px 20px 0px 20px;
  border-radius: 5px;
  box-shadow: 0px 0px 5px 1px #f5f5f5;
  background-color: #fff;
  margin: 0px 0px 20px 0px;
}
.myApp-city:hover {
  background-color: #fcfcfc;
}
.myApp-city > img {
  width: 35px;
  height: 35px;
  display: block;
  margin-right: 20px;
}
.myApp-city-right {
}
.myApp-city-right > h3 {
  font-size: 16px;
}
.myApp-city-right > p {
  color: #999999;
  font-size: 12px;
  margin: 15px 0px;
  height: 30px;
}
.myApp-city-right > a {
  display: inline-block;
  border: 1px solid #20ade5;
  height: 30px;
  width: 100px;
  font-size: 14px;
  color: #20ade5;
  text-align: center;
  line-height: 30px;
  margin-right: 100px;
}
</style>
